/* eslint-disable react/display-name */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import React, { Suspense, lazy } from 'react'
import { Redirect } from 'react-router-dom'
import { Route, Switch } from 'react-router'
// exact属性为true时路径中的hash值必须和path完全一致才渲染对应的组件，如果为false则'/'也可以匹配'/login';
// （如果strict属性为false，则末尾是否包含反斜杠结尾不影响匹配结果）

// strict属性主要就是匹配反斜杠，规定是否匹配末尾包含反斜杠的路径，如果strict为true，则如果path中不包含反斜杠结尾，
// 则他也不能匹配包含反斜杠结尾的路径，这个需要和exact结合使用

const permissions = 'user'
const requiresAuth = false

export const routes = [
  {
    path: '/',
    exact: true,
    requiresAuth: false,
    permissions: ['user', 'admin'],
    render: () => <Redirect to='/login' />
  },
  {
    path: '/login',
    name: 'Login',
    exact: true,
    strict: true,
    requiresAuth: false,//是否需要登录
    permissions: ['user', 'admin'], // 当前登录权限必须 user或admin 才可以访问
    component: lazy(() => import('../pages/login.jsx')),//路由懒加载
    meta: { title: '登录呢', icon: 'login' }
  },
  {
    path: '/JsPlan1',
    name: 'JsPlan1',
    exact: true,
    requiresAuth: true,//是否需要登录
    permissions: ['user', 'admin'], // 当前登录权限必须 user或admin 才可以访问
    component: lazy(() => import('../pages/js/plan1.jsx')),//路由懒加载
    meta: { title: 'js的plan1', icon: 'user' }
  },
  {
    path: '/JsPlan2',
    name: 'JsPlan2',
    exact: true,
    requiresAuth: true,
    permissions: ['admin'],
    component: lazy(() => import('../pages/js/plan2.jsx')),
    meta: { title: 'js的plan2' }
  },
  {
    path: '/TsPlan1',
    name: 'TsPlan1',
    exact: true,
    requiresAuth: true,
    permissions: ['admin'],
    component: lazy(() => import('../pages/ts/plan1.tsx')),
    meta: { title: 'ts的plan1' }
  },
  {
    path: '/TsPlan2',
    name: 'TsPlan2',
    exact: true,
    requiresAuth: true,
    permissions: ['user', 'admin'],
    component: lazy(() => import('../pages/ts/plan2.tsx')),
    meta: { title: 'ts的plan2' }
  },
]

export const renderRoutes = (routes, extraProps = {}, switchProps = {}) => {
  return routes ? (
    <Suspense fallback={<div>页面加载中...</div>}>
      <Switch {...switchProps}>
        {routes.map((item, i) => (
          <Route
            key={item.name || i}
            path={item.path}
            exact={item.exact}
            strict={item.strict}
            render={props => routeRender(item, props, extraProps)}
          />
        ))}
      </Switch>
    </Suspense>
  ) : null
}

// function testAwait () {
//   return new Promise((resolve) => {
//     setTimeout(function () {
//       console.log('testAwait')
//       resolve(true)
//     }, 1000)
//   })
// }

const routeRender = (route, props, extraProps) => {

  // await testAwait()

  // 登录判断(需要登录 && 未登录-->跳登录页面,,,,,,,不需要登录 || 已经登录-->正常跳转)
  const login = route.requiresAuth && !requiresAuth //跳登录
  // 该角色是否有权限访问该页面(当前角色是否在 路由要求角色数组中)
  const auth = route.permissions.includes(permissions) //有权限
  console.log(222, '是需要跳转登录页面' + login, '是否有权限' + auth, props)

  // 判断渲染route
  if (login) {
    return <Redirect to={{ path: '/login', message: '请登录后再操作！' }} />
  } else {
    if (auth) {
      return route.render ? (
        route.render({ ...props, ...extraProps, route: route })
      ) : (
        <route.component {...props} {...extraProps} route={route} />
      )
    } else {
      alert('您暂无权限')
      return <Redirect to={{ path: '/login', message: '请登录后再操作！' }} />
    }
  }
}




